<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input
                v-model="listQuery.keyword"
                placeholder="请输入搜索内容"
                class="btnScr"
                :xs="24"
                :sm="12"
                :lg="16"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                class="btnScrright"
                :xs="24"
                :sm="12"
                :lg="8"
                @click="search"
                >搜索</el-button
              >
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select
                v-model="listQuery.status"
                clearable
                placeholder="请选择状态"
                class="btnScr"
                @change="query"
              >
                <el-option
                  v-for="(item, index) in leaseStatusOptions"
                  :key="`${index}statue`"
                  :label="item"
                  :value="index"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select
                v-model="listQuery.operator"
                clearable
                placeholder="请选择运营"
                class="btnScr"
                @change="query"
              >
                <el-option
                  v-for="item in yunyingOptions"
                  :key="`${item.id}yy`"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select
                v-model="listQuery.propertyManager"
                clearable
                placeholder="请选择物业经理"
                class="btnScr"
                @change="query"
              >
                <el-option
                  v-for="item in wuyeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-date-picker
                v-model="listQuery.leaseEndDate"
                type="date"
                value-format="timestamp"
                placeholder="请选择截止日期"
                style="width: 145px"
                @change="query"
              />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { leaseStatusOptions } from "@/utils/consts";
import { listByRole } from "@/api/manager";

export default {
  components: {},
  data() {
    return {
      leaseStatusOptions,
      show: false,
      input: "",
      value: "",
      disabled: true,
      listQuery: {
        page: 1,
        keyword: "",
        leaseEndDate: "",
        limit: 10,
        propertyManager: "",
        operator: "",
        status: "",
      },
      yunyingOptions: [],
      wuyeOptions: [],
      sizeForm: {},
    };
  },
  async created() {
    const queryObj = this.$route.query;
    if (queryObj.status) {
      this.listQuery.status = Number(queryObj.status);
    }
    var yunying = await listByRole(2);
    this.yunyingOptions = yunying.data;
    var wuye = await listByRole(3);
    this.wuyeOptions = wuye.data;
  },
  mounted() {},
  methods: {
    search() {
      this.$parent.$emit("searchData", this.listQuery);
    },
    query() {
      this.$parent.$emit("searchData", this.listQuery);
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  background: #5ac6b7;
  color: #fff;
  border: 0;
  border-radius: 2px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 8px !important;
}
.btnScr {
  width: 100%;
  margin-bottom: 15px;
}
::v-deep .btnScr input {
  border-radius: 2px;
}
.btnScrright {
  border-radius: 2px;
  margin-top: -15px;
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-width: 1200px) {
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.mtright {
  margin-right: 5px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 56px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 56px;
  line-height: 66px;
}
::v-deep .el-upload__text {
  line-height: initial;
  color: #cacaca;
  margin-top: -10px;
  font-size: 12px;
}
.right10 {
  margin-left: 10px;
}
.right20 {
  margin-left: 20px;
}
::v-deep .itxt label {
  font-weight: normal;
  font-size: 12px;
}
::v-deep .itxt {
  margin-bottom: 15px;
}
::v-deep .itxtactive label {
  color: #5ac6b7;
}
.borbtoonline {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: -15px;
}
.bortopline {
  margin-top: 15px;
}
.borbtoonline .el-form-item {
  margin-bottom: 10px;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
</style>

<style>
@media (min-width: 1200px) {
  .el-input__suffix-inner i {
    font-size: 12px;
  }
  .inputTop input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-moz-placeholder,
  textarea:-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input::-moz-placeholder,
  textarea::-moz-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }

  .inputTop input:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select::-webkit-input-placeholder {
    font-size: 12px;
  }
}
</style>
